<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDateList()">
            <el-form-item label="姓名" prop="realname">
                <el-input v-model="dataForm.realname" placeholder="姓名" clearable></el-input>
            </el-form-item>
            <el-form-item prop="deptId" label="部门">
                <el-cascader
                        placeholder="点击选择上级部门"
                        :options="deptList"
                        v-model="dataForm.deptId"
                        :props="deptListTreeProps"
                        filterable
                        clearable
                        change-on-select
                ></el-cascader>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="dataForm.mobile" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDateList()">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="userList" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    align="center"
                    header-align="center"
                    label="姓名"
                    width="120"
                    prop="realname">
            </el-table-column>
            <el-table-column align="center" header-align="center" prop="gender" label="性别" width="120">
                <template slot-scope="scope">
                    <el-tag v-if="parseInt(scope.row.gender)===1">男</el-tag>
                    <el-tag v-else-if="parseInt(scope.row.gender)===2">女</el-tag>
                    <el-tag v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" prop="identityCard" label="身份证"
                             show-overflow-tooltip/>
            <el-table-column align="center" header-align="center" prop="deptName" label="部门名称" show-overflow-tooltip/>
            <el-table-column align="center" header-align="center" prop="mobile" label="手机号" show-overflow-tooltip/>
            <el-table-column type="selection" width="55"/>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50]"
                :page-size="pageSize"
                :total="totalCount"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 10px"
        ></el-pagination>
        <div style="display: flex;justify-content: flex-end;margin-top: 20px">
            <el-button @click="dataFormSubmit()">全部报名</el-button>
            <el-button type="primary" @click="selectUserSubmit()">报 名</el-button>
        </div>
    </el-dialog>
</template>

<script>
  import {treeDataTranslate} from '@/utils'

  export default {
    name: 'train-registration',
    data () {
      return {
        dataForm: {
          trainId: '',
          deptId: '',
          mobile: '',
          realname: '',
          userList: []
        },
        deptListTreeProps: {
          checkStrictly: true,
          expandTrigger: 'hover',
          label: 'name',
          value: 'id',
          children: 'children',
          emitPath: false
        },
        multipleSelection: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        userList: [],
        deptList: [], // 部门
        dialogVisible: false,
        Selection: [],
        SelectionS: []
      }
    },

    methods: {
      init (id) {
        this.dataForm.trainId = id
        this.dialogVisible = true
        this.getDateList()
        this.userList = []
        this.pageIndex = 1
        this.$http({
          url: this.$http.adornUrl('/usercenter-admin/dept/select'),
          method: 'post'
        }).then(data => {
          for (let i = 0; i < data.data.length; i++) {
            if (data.data[i].deptId === -1) {
              data.data.splice(i, 1)
            }
          }
          this.deptList = data.data
          this.deptList = treeDataTranslate(this.deptList, 'id')
        })
      },
      dataFormSubmit () {
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/traincourseallentry'),
          method: 'post',
          data: {
            'trainId': this.dataForm.trainId
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.$notify.success({
              title: '提示',
              message: '报名成功'
            })
            this.loading = false
            this.getDateList()
          } else {
            this.$notify.error({
              title: '提示',
              message: res.msg
            })
          }
          this.loading = false
        })
      },
      selectUserSubmit () {
        var that = this
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(`/train/admin/train/traincourseentry`),
          method: 'post',
          data: {
            trainId: this.dataForm.trainId,
            userIds: this.dataForm.userList
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.$notify.success({
              title: '提示',
              message: '报名成功'
            })
            this.loading = false
            this.getDateList()
          } else {
            this.$notify.error({
              title: '提示',
              message: res.msg
            })
          }
          that.loading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDateList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDateList()
      },
      getDateList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/nottrainentrystatistics'),
          method: 'post',
          data: {
            trainId: this.dataForm.trainId,
            realname: this.dataForm.realname,
            identityCard: this.dataForm.identityCard,
            mobile: this.dataForm.mobile,
            page: (this.dataForm.realname || this.dataForm.identityCard || this.dataForm.mobile) ? '' : this.pageIndex,
            limit: this.pageSize
          }
        }).then(res => {
          this.dataListLoading = false
          // if (res.data) {
          this.userList = res.data.list
          this.totalCount = res.data.totalCount
          // } else {
          //   this.userList = []
          //   this.totalCount = 0
          // }
        })
      },
      pageChange (size) {
        this.SelectionS[size] = this.Selection
      },
      // 多选用户
      handleSelectionChange (val) {
        this.dataForm.userList = val.map(x => x.userId)
      },
      // 工种菜单树选中
      deptListTreeCurrentChangeHandle (data, node) {
        this.dataForm.deptName = data.name
        this.dataForm.deptId = data.id
      },
      // 工种菜单树设置当前选中节点
      deptListTreeSetCurrentNode () {
        this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
        this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
      }
    }
  }
</script>
